<template>
  <div>
    <div class="bg">
      <div class="login_view">
        <div class="top">
          <div class="t1">
            <img src="https://uc.ky-express.com/img/icon-logo.e9e87a59.svg" />
          </div>
          <span class="tx1">进入官网</span>
        </div>
        <div class="buttom">
          <div class="center">
            <table></table>
            <div class="login_text">登录</div>
            <div>
              <div class="login">
                <div class="L1">密码登录</div>
                <div class="L2">短信登录/注册</div> 
              </div>
              <div>
                <el-input
                  class="input1"
                  v-model="input"
                  placeholder="请输入内容"
                ></el-input>
                <el-input
                  class="input2"
                  v-model="input"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div class="t2">
                <el-checkbox v-model="checked">记住密码</el-checkbox>
                <div class="res">忘记密码？</div>
              </div>
              <div>
                <button class="btn">登录</button>
              </div>
              <div class="user">
                <el-checkbox  v-model="checked"></el-checkbox>
                <div class="check">
                  我已阅读并同意跨越速运<span class="user_text">《用户隐私》</span> 和 <span class="user_text">《协议政策》</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.bg {
  margin-top: -80px;
  width: 100vw;
  height: 100vh;
  background-image: url("../../../public/img/news/login_bg.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.login_view {
  width: 450px;
  height: 500px;
  position: fixed;
  right: 100px;
  top: 240px;
}
.top {
  width: 100%;
  height: 50px;
  background-color: #f4f8fc;
  display: flex;
  align-items: center;
  border-radius: 4px 4px 0 0;
}
.t1 {
  margin-left: 30px;
}
.tx1 {
  margin-left: 100px;
  font-size: 13px;
  color: #8365f6;
}
.buttom {
  background-color: #fff;
  width: 100%;
  height: 450px;
  border-radius: 0 0 4px 4px;
}
.center {
  width: 320px;
  height: 400px;
  margin: 0 auto;
}
.login_text {
  font-size: 30px;
  font-weight: 800;
  color: #000;
  margin-top: 40px;
}
.login {
  background: #f5f7fa;
  margin-top: 40px;
  width: 280px;
  display: flex;
  flex-direction: row;
  padding: 4px;
  height: 40px;
  align-items: center;
}
.L1 {
  width: 140px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.L2 {
  width: 140px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input1 {
  width: 320px;
  margin-top: 35px;
  margin-bottom: 30px;
}
.t2 {
  width: 320px;
  display: flex;
  justify-content: space-between;
  margin-left: 0;
  margin-top: 20px;
}
.res{
  font-size: 12px;
  color: #666;
}
.btn {
  width: 100%;
  height: 35px;
  line-height: 10px;
  margin-top: 20px;
  background: #c1c7cf;
  border: 0px;
  border-radius: 4px;
  color: #fff;
}
.user_text {
  color: #8365f6;
}
.user {
  margin-top: 10px;
  display: flex;
}
.check{
  font-size: 12px;
  margin-left: 7px;
}
</style>
